<!DOCTYPE html>
<html lang="zh-cn" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>图书列表界面</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

    <!-- bootstrap.bundle.min.js 用于弹窗、提示、下拉菜单，包含了 popper.min.js -->
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap4 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <style>
        body{
            background-image:url("https://img.17sucai.com/upload/55/2013-05-18/884aa4be28287056c7b5d6d075382c51.jpg?x-oss-process=style/big");
        }
        h1
        {
            text-align:center;
        }

        div.margin{
            text-align:center;
            width:80%;

            margin-left:10%;

        }
    </style>
</head>
<body>
<h1>图书列表界面</h1>



<div class="container">
<!--    <a class="btn btn-primary float-right" href="add.html" th:href="@{/library/add}">Add</a>-->
    <table class="table">
        <thead>
        <tr>
            <th>序号</th>
            <th>图书图片</th>
            <th>图书名称</th>
            <th>作者</th>
            <th>出版社</th>
            <th>日期</th>
            <th>库存数量</th>
            <th>Operations</th>
        </tr>
        </thead>
        <tbody th:remove="all-but-first">
        <!--picture_url,name,author,chubanshe,riqi,number-->

            <tr th:each="lib:${libs}">
<!--                <td th:text="${libStat.count}">1</td>-->
                <td th:text="${lib.id}">1</td>
                <td><img th:src="${lib.picture}"></td>
                <td th:text="${lib.name}">高尔基成长三部曲</td>
            <td th:text="${lib.author}">高尔基</td>
            <td th:text="${lib.chubanshe}">人民出版社</td>
            <td th:text="${lib.riqi}">2001-11-09</td>
            <td th:text="${lib.number}">100</td>
            <td>
                <a type="button" class="btn btn-xs btn-success" href="edit.html?id=1"
                   th:href="@{/library/edit(id=${lib.id})}">编辑</a>
                <a type="button" class="btn  btn-xs btn-danger" href="./delete?id=1"
                   th:href="@{/library/delete(id=${lib.id})}">删除</a>
            </td>

        </tr>

        <tr>

            <td><img src="http://img3m4.ddimg.cn/77/13/27911444-1_l_11.jpg"></td>
            <td>高尔基成长三部曲</td>
            <td>高尔基</td>
            <td>人民出版社</td>
            <td>2001-11-09</td>
            <td>100</td>

        </tr>
        <tr>
            <td><img src="http://img3m9.ddimg.cn/93/8/25092039-1_l_3.jpg"></td>
            <td>活着</td>
            <td>余华</td>
            <td>北京十月文艺出版社</td>
            <td>2017-06-01</td>
            <td>500</td>
        </tr>
        <tr>
            <td><img src="http://img3m6.ddimg.cn/83/20/25138856-1_l_5.jpg"></td>
            <td>马尔克斯：百年孤独</td>
            <td>加西亚.马尔克斯</td>
            <td>南海出版公司</td>
            <td>2017-08-01</td>
            <td>230</td>
        </tr>
    </table>
    <a class="btn btn-primary float-bottom" href="add.html" th:href="@{/library/add}">add</a>
<!--    <button onclick="add()">add</button>-->
</div>
<script type="text/javascript">
    function add(){
        window.location.href = "/add";
        return true;
    }
</script>
</body>
</html>
